<template>
  <div class="password">
    <v-header :back-display="true">
      <div slot="title">修改密码</div>
    </v-header>

    <!-- 下面的 name 自己按需求改 -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="userInfo.username"
        name="username"
        label="用户名"
        disabled
      />
      <van-field
        v-model="password_a"
        type="password"
        name="原密码"
        label="原密码"
        autocomplete="off"
        maxlength="6"
        placeholder="填写原密码"
        :rules="[{ pattern, required: true }]"
      />
      <van-field
        v-model="password_b"
        type="password"
        name="新密码"
        label="新密码"
        autocomplete="off"
        maxlength="6"
        placeholder="填写新密码"
        :rules="[{ pattern, required: true }]"
      />
      <van-field
        v-model="password_c"
        type="password"
        name="确认密码"
        label="确认密码"
        autocomplete="off"
        maxlength="6"
        placeholder="再次填写确认"
        :rules="[{ pattern, required: true }]"
      />
      <div class="tip">
        <p>密码必须是6位数字和字母组合</p>
      </div>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">保 存</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import header from '@/components/main/header'
import { Form, Field, Button, Dialog, Toast } from 'vant';
import { mapGetters } from 'vuex'

export default {
  name: 'password',
  components: {
    "v-header": header,
    [Form.name]: Form,
    [Button.name]: Button,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [Dialog.Component.name]: Dialog.Component,
  },

  data () {
    return {
      password:'abc123',  // 原密码
      password_a: '',     // 输入原密码
      password_b: '',     // 输入新密码
      password_c: '',     // 再次输入新密码
      pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6}$/,  // 密码正则
    }
  },
  created () {
  },
  computed: {
    ...mapGetters([ 'userInfo' ])
  },
  methods: {

    //提交表单
    onSubmit(values) {
      if( this.password_a !== this.password ){
        Dialog.alert({title: '提示',message: '原密码不正确',}).then(() => {
          // on close
        });
      }else if(this.password_b !== this.password_c){
        Dialog.alert({title: '提示',message: '两次填写的密码不一致',}).then(() => {
          // on close
        });
      }else{
        console.log('提交修改密码', values,);
        Toast.success('修改成功');
        setTimeout(()=>{
          this.$router.push({path:'/user'})
        },2000)
      }

    },
  },
  mounted () {
  }
}
</script>

<style lang="less" scoped>
.password{
  position:absolute;
  width: 100%;
  height: 100%;
  top:0;
  left: 0;
  background-color: #f1f1f1;
}
.van-form{margin-top: 10px;}
.van-button--info {
  background-color: #ff8333;
  border-color: #ff8333;
  font-size: 16px;
}
.tip{
  padding: 15px 16px;
  p{font-size: 12px;color: #666;}
}
.van-dialog__header {font-weight: bold;}
</style>
